<template>
	<view class='institution-detail-container'>
		<!-- 顶部标题栏 -->
		<view class="page-header">
			<view class="header-title">{{ organDetail.companyName }}</view>
		</view>
		
		<!-- 选项卡导航 -->
		<view class="tab-container">
			<view 
				v-for="(item, index) in tabs" 
				:key="index" 
				class="tab-item"
				:class="{ 'active': currentTab === index }"
				@tap="switchTab(index)"
			>
				{{ item.title }}
				<view class="tab-indicator" v-if="currentTab === index"></view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<swiper 
			:current="currentTab" 
			@change="onSwiperChange"
			class="content-swiper"
		>
			<!-- 照片选项卡 -->
			<swiper-item :key="0" class="swiper-box">
				<scroll-view scroll-y="true" class="scroll-content">
					<view class="section-header">
						<view class="section-title">
							<view class="title-decoration"></view>
							<text>机构照片</text>
						</view>
					</view>
					
					<view class="photo-grid" v-if="picList.length > 0">
						<view class="photo-item" v-for="(item, index) in picList" :key="index" @tap="previewImage(index)">
							<image :src="item" class="photo-image" mode="aspectFill"/>
						</view>
					</view>
					<view class="empty-state" v-else>
						<text class="empty-text">暂无照片</text>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 详情选项卡 -->
			<swiper-item :key="1">
				<scroll-view scroll-y="true" class="scroll-content">
					<view class="section-header">
						<view class="section-title">
							<view class="title-decoration"></view>
							<text>机构详情</text>
						</view>
					</view>
					
					<view class="detail-content">
						<view v-if="organDetail.detail" class="detail-text">{{ organDetail.detail }}</view>
						<view v-else class="empty-state">
							<text class="empty-text">暂无详情信息</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 课程选项卡 -->
			<swiper-item :key="2">
				<scroll-view scroll-y="true" class="scroll-content">
					<view class="section-header">
						<view class="section-title">
							<view class="title-decoration"></view>
							<text>课程列表</text>
						</view>
					</view>
					
					<view class="course-list" v-if="courseList && courseList.length > 0">
						<view class="course-item" v-for="item in courseList" :key="item.courseId" @click="goCourseDetail(item.courseId)">
							<view class="course-name">{{ item.courseName }}</view>
							<view class="course-arrow">
								<text class="arrow-icon">></text>
							</view>
						</view>
					</view>
					<view class="empty-state" v-else>
						<text class="empty-text">暂无课程</text>
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 地址选项卡 -->
			<swiper-item :key="3">
				<scroll-view scroll-y="true" class="scroll-content">
					<view class="section-header">
						<view class="section-title">
							<view class="title-decoration"></view>
							<text>位置信息</text>
						</view>
					</view>
					
					<view class="address-container">
						<view class="address-card">
							<view class="address-title">公司地址</view>
							<view class="address-text">{{ organDetail.companyAddr || '暂无地址信息' }}</view>
							<button @click="getWay" class="address-button">查看路线</button>
						</view>
						
						<view class="address-card">
							<view class="address-title">训练场地</view>
							<view class="address-text">{{ organDetail.schoolAddr || '暂无地址信息' }}</view>
							<button @click="getSiteWay" class="address-button">查看路线</button>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import api from '@/utils/api.js';
	import { globalData } from '@/utils/util';
	let current = ref(0)
	let organDetail = reactive({})
	const courseList = reactive([])
	const currentTab = ref(0);// 当前选中索引,0照片，1详情，2课程，3地址
	const picList = reactive([])
	const tabs = [
		{ title: '照片' },
		{ title: '详情' },
		{ title: '课程' },
		{ title: '地址' }
	]
	const switchTab = (index) => {
		currentTab.value = index;
	}
	const onSwiperChange = (e) => {
      currentTab.value = e.detail.current;
    }
	const previewImage = (index) => {
      uni.previewImage({
        current: picList[index],  // 当前点击的图片
        urls: picList,            // 所有图片列表
        indicator: 'number',          // 指示器格式
        loop: true                    // 是否循环
      })
    }
	const dotsStyles = {
		backgroundColor: '#6190E8',
		border: '1px #6190E8 solid',
		color: '#fff',
		selectedBackgroundColor: '#6190E8',
		selectedBorder: '1px #6190E8 solid'
	}
	const getWay = () => {
	    uni.openLocation({
			latitude: (organDetail.companyLatALon && organDetail.companyLatALon.lat) || 39.909, // 目标纬度（需转换为腾讯地图坐标系，若数据源非腾讯地图需转换）
			longitude: (organDetail.companyLatALon && organDetail.companyLatALon.lon) || 116.39742, // 目标经度
			name: organDetail.companyName, // 如"天安门"
			address: organDetail.companyAddr, // 如"北京市东城区"
			success: (res) => { console.log('打开公司地址') },
			fail: (error) => { console.log('打开失败', error) }
		});
	}
	const getSiteWay = () => {
	    uni.openLocation({
			latitude: (organDetail.siteLatALon && organDetail.siteLatALon.lat) || 39.909, // 目标纬度（需转换为腾讯地图坐标系，若数据源非腾讯地图需转换）
			longitude: (organDetail.siteLatALon && organDetail.siteLatALon.lon) || 116.39742, // 目标经度
			name: organDetail.companyName, // 如"天安门"
			address: organDetail.schoolAddr, // 如"北京市东城区"
			success: (res) => { console.log('打开飞手场地地址') },
			fail: (error) => { console.log('打开失败', error) }
		});
	}
	onLoad((options) => {
		getInfoData(options.organId)
		getCourseList(options.organId)
	})
	const change = (e) => {
		current.value = e.detail.current
	}
	// 机构详情
	const getInfoData = async (organId) => {
		try {
			await api.organInfoDetail({
				organId
			}).then(res => {
				if (res.code != 0) return
				let detail = res.data;
				let imgList = detail.mainImg ? detail.mainImg.split(',') : []
				for(let i = 0; i < imgList.length; i++) {
					picList.push(globalData.OSS_URL + imgList[i])
				}
				organDetail = Object.assign(organDetail, detail)
			})
		} catch (error) {
			console.log(error)
		}
	}

	// 获取课程列表
	const getCourseList = async (organId) => {
		const data = {
			organId,
			curPage: 1,
			pageSize: 20
		}
		try {
			await api.organCourseLst(data).then(res => {
				if (res.code != 0) return
				courseList.push(...res.data.itemLst)
			})
		} catch (error) {
			console.log(error)
		}
	}

	// 跳转课程详情
	const goCourseDetail = (courseId) => {
		uni.navigateTo({
			url: `/pages/courseDetail/courseDetail?courseId=${courseId}&organId=${organDetail.organId}`
		})
	}

	// 分享给朋友
	onShareAppMessage(res => {
		return {
			title: organDetail.companyName || '优质培训机构',
			path: `/pages/institutionDetail/institutionDetail?organId=${organDetail.organId}`,
			imageUrl: picList.length > 0 ? picList[0] : '',
		}
	})
	
	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: organDetail.companyName || '优质培训机构',
			query: `organId=${organDetail.organId}`,
			imageUrl: picList.length > 0 ? picList[0] : ''
		}
	})
</script>

<style lang="scss" scoped>
	.institution-detail-container {
		background-color: #f6f8fa;
		min-height: 100vh;
		position: relative;
	}
	
	.page-header {
		background-color: #2cbaff;
		padding: 40rpx 40rpx;
		color: #fff;
		position: relative;
		text-align: center;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.tab-container {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		position: sticky;
		top: 0;
		z-index: 10;
	}
	
	.tab-item {
		position: relative;
		flex: 1;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		
		&.active {
			color: #2cbaff;
			font-weight: bold;
		}
	}
	
	.tab-indicator {
		position: absolute;
		bottom: 0;
		left: 25%;
		width: 50%;
		height: 6rpx;
		background-color: #2cbaff;
		border-radius: 6rpx;
	}
	
	.content-swiper {
		height: calc(100vh - 170rpx);
	}
	
	.scroll-content {
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.section-header {
		margin-bottom: 30rpx;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.title-decoration {
		width: 8rpx;
		height: 32rpx;
		background-color: #2cbaff;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}
	
	// 照片网格样式
	.photo-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}
	
	.photo-item {
		width: calc(50% - 20rpx);
		margin: 10rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
		transition: transform 0.3s;
		
		&:active {
			transform: scale(0.98);
		}
	}
	
	.photo-image {
		width: 100%;
		height: 360rpx;
		display: block;
	}
	
	// 详情样式
	.detail-content {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.detail-text {
		font-size: 28rpx;
		line-height: 1.8;
		color: #333;
		text-align: justify;
	}
	
	// 课程列表样式
	.course-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.course-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:active {
			background-color: #f9f9f9;
		}
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.course-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}
	
	.course-arrow {
		color: #999;
		font-size: 24rpx;
	}
	
	// 地址样式
	.address-container {
		padding: 10rpx 0;
	}
	
	.address-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.address-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.address-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}
	
	.address-button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #2cbaff;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		box-shadow: 0 6rpx 10rpx rgba(44, 186, 255, 0.2);
	}
	
	// 空状态
	.empty-state {
		padding: 60rpx 0;
		text-align: center;
		color: #999;
	}
	
	.empty-text {
		font-size: 28rpx;
	}
</style>